<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
      <div id="one" class="one">
          <p>hello jquery1111</p>
      </div>
      <div>test</div>
      <p>hello jquery2222</p>
      <button>按钮</button>
</body>
</html>
<script src="js/jquery-3.1.0.min.js"></script>
<script>
    /*
       jquery是一个js库， 其实它就是对原生态的js的一次封装
             你理解它就是一个js的工具包
            使用的步骤：  1导入jquery的js文件，然后就可以使用了
        */

    //文档就绪函数(保证所有的页面内容全部加载完毕以后在执行function()中的代码)
    //  $(document).ready(function(){
    //      alert('hello jquery');
    // });
    //文档就绪函数的简写
   $(function(){
        //选择器  语法  $(css的选择器)
       // $("div")
         //$("#one")
        // $(".one");
    //$("div").length 获得div的个数
       //alert($("div").length);
       //alert($("#one").length);
     // alert( document.getElementById("one").innerHTML);
       //alert($("#one").html());
       //alert($("#one p").html())

       //被按钮绑定事件
       $("button").click(function(){
          // $("p").html("<span>hello span</span>")
           $("div p").html("<span>hello span</span>")
       })



   });


</script>